import { CONFIG } from '@/constants';
import { useIntl } from '@umijs/max';
import { Image, Timeline, Typography } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

const { Title } = Typography;
type IParams = {
    title: string;
    list: any[];
};
const OrderStep: React.FC<IParams> = (props) => {
    const [timeLineItem, setItemLineItem] = useState<Array<any>>();
    const intl = useIntl();
    useEffect(() => {
        const items = props.list.map((item) => {
            return {
                children: (
                    <>
                        <div
                            style={{
                                fontWeight: 600,
                                marginBottom: 20,
                                fontSize: 18,
                            }}
                        >
                            {item.step + '%'}
                        </div>
                        <div style={{ marginBottom: 20 }}>
                            {item[intl.formatMessage({ id: 'item.title' })]}
                        </div>
                        <div style={{ marginBottom: 20 }}>
                            {item.images.map((image: string, index: number) => (
                                <Image
                                    key={index}
                                    width={100}
                                    src={CONFIG.IMAGE_URL + image}
                                />
                            ))}
                        </div>
                    </>
                ),
                label: dayjs(item.finishedtime * 1000).format(
                    'YYYY-MM-DD HH:mm:ss',
                ),
            };
        });
        setItemLineItem(items);
    }, [props]);
    return (
        <>
            <Title level={5} style={{ marginTop: 30 }}>
                {props.title}
            </Title>
            <Timeline
                style={{ width: '30%' }}
                items={timeLineItem}
                mode="left"
            />
        </>
    );
};
export default OrderStep;
